<template>
    <div class="usermess">

      <div class="first" v-show="out">
        <div class="iconfont" title="登录">
          <a href="/#/login">&#xe616;</a>
        </div>

        <router-link to="/login">
          <button>登录</button>
        </router-link>
        <router-link to="/register">
          <button>注册</button>
        </router-link>
        
      </div>

      <div class="second" v-show="login">

        
        <div class="top">
          <router-link to="/usercenter">
            <div class="picture">
            <router-link to="/usercenter">
                <img :src="this.list.photo" alt="">
                <p><a href="###">{{this.list.name}}</a></p>
            </router-link>
            </div>
          </router-link>

            <div class="intro">
                <p class="title">个签：</p>
                <p v-show="!this.list.motto">暂无</p>
                <p>{{this.list.motto}}</p>
            </div>
        </div>
        

        <div class="main">
          <span>
            <p><a href="/#/fans">粉丝：</a>{{this.list.fans}}</p>
            <p>评论数：{{this.list.comments}}</p>
            <p><a href="/#/myvideo">视频数：</a>{{this.list.videos}}</p>
            <p>访问量：{{this.list.access}}</p>
          </span>
          <span class="time">
            <p>获赞：{{this.list.likes}}</p>
            <p><a href="/#/myblog">博客数：</a>{{this.list.blogs}}</p>
            <p><a href="/#/mybook">书籍数：</a>{{this.list.books}}</p>
            <p>入驻日期：{{this.time}}</p>
          </span>
          <div><a href="###" @click="loginout()">退出登录</a></div>
        </div>

      </div>

      <div class="mark"  v-show="isshow">
          <p>确定退出登录？</p>
          <span><a href="###" @click="no()">取消</a></span>
          <span><a href="###" @click="del()">确定</a></span>
      </div>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import {EventBus} from '../../../../static/js/eventBus'
export default {
  name: 'usermess',
  data () {
    return {
      out: true,
      login: false,
      list: [],
      time: '',
      isshow: false,
    }
  },

  created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

				if (response.status === 200) {
          
          if (response.data !== "") {
            this.login = true
            this.out = false
          } else {
            this.login = false
            this.out = true
          }
          this.list = response.data
          if (this.list.createtime != "") {
            this.time = this.list.createtime.slice(0,10)
          }
          // console.log(this.list)
				} 

      })
    },

    methods: {
      loginout () {
        axios.get(`/api/user/logout`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.isshow = true
            // console.log(this.list)
          } 

			})
      },

      no () {
        this.isshow = false
      },

      del () {
        this.out = true
        this.login = false
        this.isshow = false
        this.$message({
          type: 'success',
          message: "退出成功！"
        })
      }

    },

}
</script>

<style lang="stylus" scoped>
.usermess
  width 100%
  height 15rem
  margin-top 5rem
  border 1px #ccc solid
  border-radius 10px
  box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
  background-color #fff
  .first
    width 100%
    height 100%
    padding-top 2rem
    box-sizing border-box
    // background-color red
    .iconfont
      width 36%
      line-height 5.4rem
      margin-left 32%
      border-radius 100px
      font-size 3rem
      text-align center
      background-color #ddd
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    button
      width 30%
      height 2rem
      margin-top 3rem
      margin-left 15%
      font-size 1rem
      color #FFD700
      border-radius 15%
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      background-color skyblue
    button:hover
      background-color #26a2ff
      color #fff
  .second
    width 100%
    height 100%
    // background-color red
    .top
      height 5rem
      padding-top .8rem
      padding-bottom .5rem
      position relative
      .picture
        height 5.5rem
        width 30%
        display inline-block
        margin-left 5%
        border-bottom .05rem #333 dotted
        // background-color red
        img 
          height 4rem
          width 70%
          margin-left 15%
          border-radius 50%
        p
          line-height 1rem
          text-align center
          width 100%
          margin-top .5rem
          // background-color red
          a
            color #FFD700
          a:hover
            color #26a2ff
      .intro
        width 52%
        height 5.3rem
        left 35.5%
        top 1rem
        font-size .75rem
        position absolute
        border-bottom .05rem #333 dotted
        // background-color red
        p
          line-height 1rem
        .title
          font-size .8rem
    .main
      height 8rem
      padding-left 2rem
      // background-color skyblue
      span 
        width 45%
        margin-left -8%
        display inline-block
        // background-color red
        p
        line-height 1.7rem
      .time
        width 55%
        position absolute
        margin-left 0%
        margin-top 0rem
      div
        line-height 1.5rem
        width 26%
        text-align center
        font-size .8rem
        margin-left 25%
        border 1px #ccc solid
        border-radius 10px
        background-color #fff
        a
          color #26a2ff
      div:hover
        background-color skyblue
        a
          color #fff
  .mark
    width 100%
    height 10rem
    z-index 1
    position absolute 
    top 6rem
    left -38rem
    border 1px skyblue solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    p
      width 100%
      line-height 3rem
      font-size 1rem
      text-align center
      margin-top .5rem
      // background-color red
    span 
      line-height 8rem
      padding .9rem
      margin-left 20%
      font-size 1rem
      // background-color red
</style>